React element 事件 VS DOM element 事件

React element 處理事件跟使用 DOM element 處理事件差異:

• 事件的名稱在 React 中都是 camelCase，而在 HTML DOM 中則是小寫。
• 事件的值在 JSX 中是一個 function，而在 HTML DOM 中則是一個 string。

<element onclick="myScript[String]"> \\React DOM
<element onClick="myScript[Function]"> \\HTML DOM

Class Component VS function component

Class Component 或 function component 稍微有不同的寫法，但差不多是

1. 定義 state
2. 定義事件處理 method 或 function
3. 將 this 關鍵字綁定 method ，或如果是使用 Hook useState 去處理更新資料

以下完整例子

Class Component 事件處理

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
    // 為了讓 `this` 能在 callback 中被使用，這裡的綁定是必要的：
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }
   
  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}      </button>
    );
  }}

ReactDOM.render(
  <Toggle />, document.getElementById('root'));

function component 事件處理

const { useState } = React;

function Toggle() {
  const [state, setState] = useState(true);
  
  function handleClick(e) {
    e.preventDefault();
    setState(!state)
  }

  return (
    <button onClick={handleClick}>
        {state ? 'ON' : 'OFF'}
      </button>
  );
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

將參數傳給 Event Handler，注意使用 bind

class Toggle extends React.Component {
  //略
  
  handleClick(id) {
    console.log(id) //#a5aa
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }
   
  render() {
    return (
      <button onClick={this.handleClick.bind(this, '#a5aa')}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}      </button>
    );
  }}

//略

其他的綁定方法，arrow function

除了使用 bind 也可以寫成 arrow function ，而下一篇會繼續介紹為什麼要使用 bind 。

button onClick={() => this.deleteRow('id')}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, 'id')}>Delete Row</button>

以上今天

參考資料：
https://zh-hant.reactjs.org/docs/handling-events.html
理解 JS 裡面的 bind